<template>
	<div class="components-footer">
		<div class='footer-bar flex'>
			<div @click="clickIndex('find')" class="find flex"><img :src="footer.srcFind"/>优选</div>
			<div @click="clickClassify('classify')" class="classify flex"><img :src="footer.srcClassify"/>分类</div>
			<div @click="clickMe('me')" class="me flex"><img :src="footer.srcMe"/>我的</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapMutations, mapActions } from 'vuex'
	export default{
		data() {
			return {

			}
		},
		
		created: function () {
			this.init();
		},
		methods: {
			...mapActions({
				init:'footer/init',
				clickfind: 'footer/clickfind',
				clickclassify: 'footer/clickclassify',
				clickme: 'footer/clickme'
			}),
			clickIndex(find) {
				this.$router.replace("/find");
			}
			,clickClassify(classify) {
				this.$router.replace("/classify");
			}
			,clickMe(me) {
				this.$router.replace("/me");
			}
		}
		,computed: {
			...mapState({
				footer: state => state.footer
			})
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	.components-footer{
		background: #FFFFFF;
		height: .98rem;
		position: fixed;
		z-index: 16;
		bottom: 0;
		left: 0;
		width: 7.5rem;
		border-top: 1px solid #909090;
		.footer-bar{
			justify-content: space-between;
			div{
				height: .98rem;
				flex: 1;
				text-align: center;
				font-size: .2rem;
				color: #464646;
				font-family: PingFangSC-Regular;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				img{
					width: .5rem;
					height: .5rem;
				}
			}
		}
	}
</style>